<template>
  <div class="main-container">
    <div class="flex-box wrap" v-if="canIUse">
      <div class="flex-item fb-12 userinfo">
        <div class="flex-box">
          <div class="flex-item fb-1">
            <img class="avatar-url" :src="userInfo.avatarUrl" alt="">
          </div>
          <div class="flex-item fb-2">
            <span>{{userInfo.nickName}}</span>
          </div>
          <div class="flex-item">
            <span>coin:1000</span>
          </div>
        </div>
      </div>
      <div class="flex-item fb-12">
        <!-- <img src="../../assets/image/timg.gif" alt=""> -->
        <slideshow :slides="slides"></slideshow>
      </div>

      <div class="flex-item fb-12 scroll-list">
        <card :gameList="gameList" title="大家都在玩"></card>

      </div>

    </div>
  
    <div class="flex-box" v-else>
      <div class="flex-item fb-12">
        请点击获取用户按钮授权获取用户信息。
      </div>
      <div class="flex-item fb-12">
        <button open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>
      </div>
    </div>
  
  </div>
</template>

<script>
  import card from "@/components/card";
  import slideshow from '@/components/slideshow'
  import request from "@/utils/request";
  
  export default {
    data() {
      return {
        canIUse: false,
        userInfo: {},
        code: '',
        slides: [{
          title: '223423',
          imgUrl: 'https://c-c.jiahuagame.com/minigame/gamebox/slides/1.jpg'
        }, {
          title: 'asd',
          imgUrl: 'https://c-c.jiahuagame.com/minigame/gamebox/slides/2.jpg'
        }, {
          title: 'asd',
          imgUrl: 'https://c-c.jiahuagame.com/minigame/gamebox/slides/3.jpg'
        }],
        gameList: [{
          gameName: '经典斗牛',
          gameIcon: 'https://c-c.jiahuagame.com/gamehome/hall/icon/classic-bull.png'
        },{
          gameName: '长沙麻将',
          gameIcon: 'https://c-c.jiahuagame.com/gamehome/hall/icon/cs-majiang.png'
        },{
          gameName: '点子牛',
          gameIcon: 'https://c-c.jiahuagame.com/gamehome/hall/icon/dianzi-bull.png'
        },{
          gameName: '斗公牛',
          gameIcon: 'https://c-c.jiahuagame.com/gamehome/hall/icon/fight-bull.png'
        },{
          gameName: '跑得快',
          gameIcon: 'https://c-c.jiahuagame.com/gamehome/hall/icon/pdk-icon.png'
        },{
          gameName: '三公',
          gameIcon: 'https://c-c.jiahuagame.com/gamehome/hall/icon/sangong.png'
        }]
      };
    },
    created() {
      // 调用应用实例的方法获取全局数据
      // this.getUserInfo();
    },
    mounted() {
      this.getCode();
      this.getCanIUse();
      

    },
  
    components: {
      card,
      slideshow
    },
  
    methods: {
      newsIdChange() {
        console.error(9)
      },
      getCode() {
        wx.pro.login({
            timeout: 20000
          })
          .then(loginRes => {
            this.code = loginRes.code
          })
          .catch(err => {
            console.error('getCode', err)
          })
      },
      getCanIUse() {
        wx.pro.getSetting().then(settingRes => {
          if (settingRes.authSetting["scope.userInfo"]) {
            // 用户已授权 显示正常页面
            this.canIUse = true;
            wx.pro
              .authorize({
                scope: "scope.userInfo"
              })
              .then(authorizeRes => {
  
                // 获取用户信息
                wx.pro.getUserInfo({})
                  .then(userInfoRes => {
                    this.userInfo = userInfoRes.userInfo;
                    this.globalData.userInfo = userInfoRes.userInfo;
                    request.login({
                      ...userInfoRes,
                      code: this.code
                    });
                  })
  
              });
          } else {
            // 用户未授权 显示授权页面
            // 从按钮处获取
            this.canIUse = false;
          }
        });
      },
      getUserInfo({
        mp
      }) {
        let uI = mp.detail.userInfo
        if (uI) {
          // 获取到userInfo
          this.canIUse = true;
  
          this.userInfo = uI;
          this.globalData.userInfo = uI;
  
          request.login({ ...uI,
            code: this.code
          });
        } else {
          wx.showToast({
            title: '授权失败，请重新选泽',
            icon: 'none',
            duration: 3000,
            mask: true
          });
        }
      }
    }
  };
</script>

<style scoped>
  .main-container {
    width: 100%;
    height: 100%;
    background: #78a39f;
  }

  .avatar-url {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
  }
  
  .game-list {
    width: 100%;
  }
  
  .game-list li {
    box-sizing: content-box;
    padding: 2px 6px;
  }
  
  .swiper {
    height: 200px;
    width: 100rpx;
    background: #f44328;
  }
  
  .swiper-item {
    height: 200px;
    width: 100rpx;
    background: #f443f8;
  }
</style>
